<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="CellTooltip">
    <div class="popover-container">
      <ul v-if="portData" class="list">
        <li class="item">
          <span class="label">链接桩</span>
          <span class="text">{{ portData.label }}</span>
        </li>
        <li class="item" v-if="portData.value_type_name">
          <span class="label">类型</span>
          <span class="text">{{ portData.value_type_name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, nextTick } from "vue"
import { designerStore } from 'src/stores/designerTool/designerTool'
const portData = ref(<Record<string,any>>{})
const popoverVisible = ref(false)
const placement = ref('')
const popoverKey = ref(1)
const store = designerStore()
watch(() => store.tooltipPort, (newdata, oldData) => {
  if (JSON.stringify(newdata)!='{}') {
    initData()
  } else {
    resetData()
  }
})
function initData() {
  if (store.tooltipPort.nodeId) {
    const categoriesData = store.categoriesSubset[store.tooltipPort.nodeId]
    const group = categoriesData.configs
    if (group && Array.isArray(group)) {
      const portIndex = group.findIndex((row) => row.id === store.tooltipPort.portId)
      if (portIndex !== -1) {
        portData.value = group[portIndex]
        const tooltip:any = document.querySelector('.CellTooltip')
        tooltip.style.left = store.tooltipPort.left
        tooltip.style.top = store.tooltipPort.top
        tooltip.style.opacity = 1

        // tooltip.style.width = store.tooltipPort.width
        // tooltip.style.height = store.tooltipPort.height
        placement.value = store.tooltipPort.placement
        popoverVisible.value = true
      }
    }
  }
}
function resetData() {
  popoverVisible.value = false
  const tooltip:any = document.querySelector('.CellTooltip')
  tooltip.style.opacity = 0
  tooltip.style.left = '-1000px'
  tooltip.style.top = '-1000px'
  setTimeout(() => {
    portData.value = {}
    placement.value = ''
    popoverKey.value++
  }, 200)

}
</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";

.CellTooltip {
  position: absolute;
  left: -1000px;
  top: -1000px;
  z-index: 999;
  background: white;
  border-radius: 3px;
  opacity: 0;
  box-shadow: 0 0 5px 1px #e7e7e7;
  transition: opacity .3s linear;

  ::v-deep.el-popover__reference-wrapper {
    height: 100%;
    width: 100%;

    .el-popover__reference {
      height: 100%;
      width: 100%;
    }
  }
}

.popover-container {
  padding: 8px;

  .list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 204px;

    .item {
      font-size: 12px;
      padding: 0;
      line-height: 16px;
      word-break: break-all;
      margin: 0;
      width: 204px;
      display: flex;

      .label {
        flex: 1 0 38px;
        text-align: right;
        padding-right: 4px;
        position: relative;
        word-break: break-all;
        color: rgba(0, 0, 0, .85);
      }

      .text {
        padding-left: 4px;
        flex: 3 0 100px;
        color: rgba(0, 0, 0, .45);
        word-break: break-all;
      }

      .state-text {
        margin-left: 4px;
      }
    }

    .item+.item {
      margin: 6px 0 0 0;
    }
  }
}
</style>
